<template>
  <article>
    <!--blogsbox begin-->
    <div class="blogsbox">
      <div v-for="item in newBlogData" :key="item.uid" class="blogs" data-scroll-reveal="enter bottom over 1s"
        @click="goToInfo(item)" style="padding-bottom: 0px;">

        <h3 class="blogtitle">
          <a href="javascript:void(0);">{{item.title}}</a>
        </h3>

        <span class="blogtopic">
          <a href="javascript:void(0);" title>
            <img v-if="item.photoList" :src="item.photoList[0]" alt>
          </a>
        </span>

        <p class="blogtext">{{item.summary}}</p>
        <div class="bloginfo">
          <ul>

            <li class="author" style="padding: 20px;">
              <span class="iconfont">&#xe60f;</span>
              <a href="javascript:void(0);" @click="goToAuthor(item.author)">{{item.author}}</a>
            </li>
            <li class="createTime" style="padding: 20px; margin-left: -40px;">
              <span class="iconfont">&#xe606;</span>
              {{item.createTime}}
            </li>
            <li class="lmname" v-if="item.blogSort">
              <span class="iconfont">&#xe603;</span>
              <a href="javascript:void(0);" @click="goToList(item.blogSort.uid)">{{item.blogSort.sortName}}</a>
            </li>
            <li class="view">
              <span class="iconfont" style="margin-left: -20px;">&#xe8c7;</span>
              <span>{{item.clickCount}}</span>
            </li>
            <li class="like">
              <span class="iconfont" style="margin-left: 0px;">&#xe663;</span>
              {{item.collectCount}}
            </li>

          </ul>
        </div>
      </div>

      <div class="isEnd">
        <!-- <span v-if="!isEnd">正在加载中~</span> -->

        <div class="loadContent" @click="loadContent" v-if="!isEnd&&!loading">点击加载更多</div>

        <div class="lds-css ng-scope" v-if="!isEnd&&loading">
          <div style="width:100%;height:100%" class="lds-facebook">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>

        <span v-if="isEnd">我也是有底线的~</span>
      </div>
    </div>
    <!--blogsbox end-->

    <div class="sidebar">
      <!--标签云-->
      <RightSide :title="'排行榜'" :dataList="rankingList" @item-click="handleItemClick" />
    </div>

  </article>
</template>

<script>
  import {
    getBlogByLevel,
    getNewBlog,
    recorderVisitPage,
  } from "../api/index";
  import {
    Loading
  } from 'element-ui';
  import {
    getBlogByUid
  } from "../api/blogContent";
  import {
    getCollegeArticleList,
    getHotCollegeTopic
  } from "../api/college";
  export default {
    name: "collegeMessage",
    components: {
      //注册组件
      RightSide: () => import("../components/RightRank")
    },
    data() {
      return {
        stickyOffset: 0, // 根据实际情况设置偏移值
        collegeId: 0,
        loadingInstance: null, // loading对象
        VUE_XUAN_WEB: process.env.VUE_XUAN_WEB,
        firstData: [], //；一级推荐数据
        secondData: [], //；二级级推荐数据
        thirdData: [], //三级推荐
        fourthData: [], //四级推荐
        newBlogData: [], //最新文章
        hotBlogData: [], //最热文章
        hotTagData: [], //最新标签
        keyword: "",
        currentPage: 1,
        pageSize: 15,
        total: 0, //总数量
        isEnd: false, //是否到底底部了
        loading: false, //是否正在加载
        rankingList: []
      };
    },
    mounted() {
      const sidebar = this.$el.querySelector('.sidebar');
      this.stickyOffset = sidebar.offsetTop; // 获取 .sidebar 元素距离顶部的距离
      window.addEventListener('resize', this.updateFixedPosition);
      window.addEventListener('scroll', this.handleScroll);
      // 注册scroll事件并监听
      this.loading = false;
    },
    created() {
      this.collegeId = this.$route.query.collegeUid;
      // 获取最新博客
      this.newBlogList();
      var params = new URLSearchParams();
      params.append("pageName", "INDEX");
      recorderVisitPage(params).then(response => {});
      getHotCollegeTopic(params).then(response => {
        // 记录一下用户点击日志
        this.rankingList = []
        for (let i = 0; i < 3; i++) {
          let tmp = {
            name: response.data[i].title,
            score: response.data[i].clickCount,
            oid: response.data[i].oid,
          }
          this.rankingList.push(tmp)
        }
        console.log(response)
      });
    },
    beforeDestroy() {
      // 在组件销毁前移除滚动监听
      window.removeEventListener('resize', this.updateFixedPosition);
      window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
      handleItemClick(item) {
        item.type = 0;
        this.goToInfo(item);
      },
      updateFixedPosition() {
        const fixedElement = this.$el.querySelector('.fixed');
        const blogsBox = this.$el.querySelector('.blogsbox');

        if (fixedElement && blogsBox) {
          const viewportWidth = window.innerWidth;
          const blogsBoxRect = blogsBox.getBoundingClientRect();
          const blogsBoxRight = viewportWidth - blogsBoxRect.right;

          fixedElement.style.right = blogsBoxRight - 417 + 'px';
        }
      },
      handleScroll() {
        // console.log(window.pageYOffset)
        // console.log(sticky)
        const sidebar = this.$el.querySelector('.sidebar');
        if (window.pageYOffset >= this.stickyOffset + 110) {
          sidebar.classList.add('fixed');
          this.updateFixedPosition()
        } else {
          sidebar.classList.remove('fixed');
        }
      },
      goToInfo(blog) {
        console.log(blog)
        if (blog.type == "0") {
          let routeData = this.$router.resolve({
            path: "/college/info",
            query: {
              blogOid: blog.oid
            }
          });
          window.open(routeData.href, '_blank');
        } else if (blog.type == "1") {
          var params = new URLSearchParams();
          params.append("uid", blog.uid);
          getBlogByUid(params).then(response => {
            // 记录一下用户点击日志
          });
          window.open(blog.outsideLink, '_blank');
        }
      },
      //跳转到搜索详情页
      goToList(uid) {
        let routeData = this.$router.push({
          path: "/list",
          query: {
            sortUid: uid
          }
        });

      },
      //跳转到搜索详情页
      goToAuthor(author) {
        let routeData = this.$router.push({
          path: "/list",
          query: {
            author: author
          }
        });
      },
      //最新博客列表
      newBlogList() {
        var that = this;
        that.loadingInstance = Loading.service({
          lock: true,
          text: '正在努力加载中……',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        var params = new URLSearchParams();
        params.append("currentPage", this.currentPage);
        params.append("pageSize", this.pageSize);
        params.append("collegeSortUid", this.collegeId);
        getCollegeArticleList(params).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            that.newBlogData = response.data.records;
            that.total = response.data.total;
            that.pageSize = response.data.size;
            that.currentPage = response.data.current;
          }
          that.loadingInstance.close();
        }, function(err) {
          that.loadingInstance.close();
        });
      },

      loadContent: function() {
        var that = this;
        that.loading = false;
        that.currentPage = that.currentPage + 1;
        var params = new URLSearchParams();
        params.append("currentPage", that.currentPage);
        params.append("pageSize", that.pageSize);
        params.append("collegeSortUid", that.collegeId);
        getCollegeArticleList(params).then(response => {
          if (response.code == this.$ECode.SUCCESS && response.data.records.length > 0) {
            that.isEnd = false;
            var newData = that.newBlogData.concat(response.data.records);
            that.newBlogData = newData;
            that.total = response.data.total;
            that.pageSize = response.data.size;
            that.currentPage = response.data.current;

            //全部加载完毕
            if (newData.length < that.pageSize) {
              that.isEnd = true;
            }
          } else {
            that.isEnd = true;
          }
          that.loading = false;
        });
      }
    }
  };
</script>

<style scoped>
  .bloginfo {
    width: 100%;
  }

  .bloginfo ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .bloginfo li {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }

  .iconfont {
    margin-right: 5px;
    /* 可选: 设置图标和文本之间的间距 */
  }

  .cloudbox {
    padding-top: 20px;
  }

  .cloudblogsbox {
    width: 90%;
    /* 或者一个固定的宽度 */
    /* 如果有最大宽度限制，可以设置 max-width */
    max-width: 80%;
    margin: auto;
    /* 使用 margin: auto; 实现居中 */
  }


  .el-loading-mask {
    z-index: 2002;
  }

  .isEnd {
    float: left;
    width: 100%;
    height: 80px;
    text-align: center;
  }

  .ng-scope {
    margin: 0 auto;
    width: 18%;
    height: 10%;
  }


  .iconfont {
    font-size: 15px;
    margin-right: 2px;
  }
</style>
